<template>
  <div>
    <a-card :bordered="false" style="margin-bottom:14px;">
      <a-form-model ref="form" layout="inline" @keyup.enter.native="searchQuery">
        <div style="border-bottom: 1px #ccc dashed;padding-bottom: 10px;margin-bottom: 10px;">
          <a-form-model-item label="指派规则">
            <a-radio-group v-model="formData.status" @change="onChangeSwitch">
              <a-radio :value="true">开启</a-radio>
              <a-radio :value="false">关闭</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </div>
        <div class="m-item">
          <a-form-model-item label="省级" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input v-model="queryParam.provincial" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="地级" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input v-model="queryParam.city" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="县级" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input v-model="queryParam.county" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="乡级" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input v-model="queryParam.township" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="村级" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input v-model="queryParam.village" placeholder="请输入" />
          </a-form-model-item>
        </div>
        <div class="m-item">
          <a-form-model-item label="机构/部门" :label-col="{ span: 6 }" :wrapper-col="{span: 18}">
            <a-input v-model="queryParam.department" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="上级机构" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input v-model="queryParam.parentDepartment" placeholder="请输入" />
          </a-form-model-item>
        </div>
        <div style="margin-top:20px;">
          <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
            <a-button class="Indormation-list-CX" type="primary" @click="searchQuery"> 查询 </a-button>
            <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="searchReset"> 重置 </a-button>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-card>

    <div class="card-container">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="onImport" type="primary">导入</a-button>
        <a-button @click="handleExportXls(exportXlsFileName, 'POST')" style="margin-left:12px;">导出</a-button>
        <a-button @click="batchDel" style="margin-left:12px;" :disabled="selectedRowKeys.length <= 0"
          >批量删除</a-button
        >
      </div>
      <div class="table-content">
        <a-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          class="j-table-force-nowrap"
          @change="handleTableChange"
        >
          <span slot="action" slot-scope="text, record">
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
    </div>
    <draggerUploadFiles
      :downloadFileAddr="`${downloadFileAddr}xlsx/${templatesDeptName}`"
      :downloadFileName="downloadFileNameDept"
      :importExcelUrl="importExcelUrl"
      v-if="UploadFilesBool"
      @getDatas="getDatas"
      ref="draggerUploadFiles"
    />
    <statusTips :data="statusData" ref="statusTips" />
  </div>
</template>

<script>
import { publicApi, designateSwitchStatus, designateSwitch } from '@/api/warning/Policy.js'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import draggerUploadFiles from '@/components/zxd/upload/draggerUploadFiles'
import statusTips from './components/statusTips.vue'
import downLoadComponents from '@/components/zxd/downLoad'
import qs from 'qs'
export default {
  components: {
    draggerUploadFiles,
    statusTips,
    downLoadComponents
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      formData: {
        status: undefined
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          // width: 100,
          // align: 'center',
          customRender: (text, record, index) =>
            `${(this.ipagination.current - 1) * this.ipagination.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '省级',
          // align:"center",
          dataIndex: 'provincial'
        },
        {
          title: '地级',
          // align:"center",
          dataIndex: 'city'
        },
        {
          title: '县级',
          // align:"center",
          dataIndex: 'county'
        },
        {
          title: '乡级',
          // align:"center",
          dataIndex: 'township'
        },
        {
          title: '村级',
          // align:"center",
          dataIndex: 'village'
        },
        {
          title: '机构/部门',
          dataIndex: 'department'
          // align:"center",
        },
        {
          title: '上级机构/部门',
          dataIndex: 'parentDepartment'
          // align:"center",
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // width:200,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: publicApi.designateList,
        exportXlsUrl: publicApi.designateExportExcel,
        deleteBatch: publicApi.designateDeleteBatch,
        delete: publicApi.designateDelete
      },
      tabKey: '1',
      downloadFileAddr: process.env.BASE_URL, //下载模版文件地址
      templatesDeptName: 'importTemplatesDesignateDept.xlsx',
      downloadFileNameDept: '预警策略（指派列表）-指派部门导入模板.xlsx', //下载模版文件名称-指派部门
      exportXlsFileName: '预警策略（指派列表）-导出',
      importExcelUrl: publicApi.designateImportExcel, //excel导入地址
      UploadFilesBool: false,
      statusData: {}
    }
  },
  created() {
    this.getDesignateSwitchStatus()
  },
  methods: {
    onTabChange(e) {
      console.log(e)
    },
    onImport() {
      this.UploadFilesBool = true
      this.$nextTick(() => {
        this.$refs.draggerUploadFiles.visible = true
      })
    },
    // 导入或者增加，成功后显示提示
    getDatas(val) {
      console.log(val)
      if (val && val.code === 200) {
        this.statusData = val ? val : {}
        this.$refs.statusTips.visible = true
        this.$refs.statusTips.closeTime = 3
        var auth_timetimer = setInterval(() => {
          this.$refs.statusTips.closeTime--
          if (this.$refs.statusTips.closeTime <= 0) {
            this.$refs.statusTips.visible = false
            this.UploadFilesBool = false
            this.loadData()
            clearInterval(auth_timetimer)
          }
        }, 1000)
      }
    },
    getDesignateSwitchStatus() {
      designateSwitchStatus()
        .then(res => {
          if (res.success) {
            this.formData.status = res.result
          } else {
            this.formData.status = false
            console.log('请求开关状态失败')
          }
        })
        .catch(e => {
          this.formData.status = false
          this.$message.warning('请求开关状态失败！')
        })
    },

    onChangeSwitch(e) {
      let params = {
        status: this.formData.status
      }
      designateSwitch(qs.stringify(params))
        .then(res => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warning('请求失败！')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.main-div {
  background: #fff;
}
.m-item {
  display: flex;
  > div {
    margin-right: 0;
    flex: 0 0 20%;
  }
}
.card-container {
  background: #fff;
  overflow: hidden;
  padding: 24px 24px 0;
  /deep/.ant-tabs {
    border: 0;
    padding: 0;
  }
  // .table-operator{
  //   margin-left:48px;
  //   margin-top: 48px;
  // }
  .table-content {
    padding: 18px 0 24px;
  }
}
</style>
